<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>列表渲染</title>
</head>
<body>
  <div id="root">
    <h2>监测数据变化的原理</h2>
    <hr>
    <div>
      <!-- <button @click="persion[0].name = '张叁'">更新数据</button> -->
      <!-- 下面这种情况无法被Vue监测并引起视图更新 -->
      <button @click = "persion[0] = {'id':'sk9G2O01avD','name':'张叁','age':'12'}">更新数据</button>
      <ul v-for="p of persion" :key="p.id">
        <li>{{ p.name }} ，年龄：{{ p.age }}</li>
      </ul>
    </div>
  </div>

  <script type="text/javascript">
    new Vue({
     el: '#root', 
     data: { 
       persion: [
         {id:'sk9G2O01avD',name:'张三',age:'12'},
         {id:'k8F4Dl7m',name:'李四',age:'34'},
         {id:'1Ff3lm0G',name:'李六',age:'54'},
         {id:'sf3Pd94pf7za',name:'张九',age:'32'},
         {id:'oB5vA0Qmm1p',name:'杰克',age:'22'}
       ],
     }
   })
 </script>

  <!-- 模拟vue数据监测 -->
  <script type="text/javascript" >
    let data = {
        name:'尚硅谷',
        address:'北京',
    }

    //创建一个监视的实例对象，用于监视data中属性的变化
    const obs = new Observer(data)		
    console.log('obs',obs)	

    //准备一个vm实例对象
    let vm = {}
    vm._data = data = obs
    console.log('vm',vm)

    function Observer(obj){
        //汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)
        //遍历
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
                    obj[k] = val
                }
            })
        })
    }
</script>
</body>
</html>


